<template>
    <div >
        <input v-model="splb.query" class="sousuo" type="text" name="" id="">
        <span @click="sousuo" class="el-icon-search"></span>
        <span @click="add" class="add">添加商品</span>
        <el-table :data="sp.goods" style="width: 80vw" height="80%" :stripe="true" border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="goods_name" label="商品名称" width="600"></el-table-column>
          <el-table-column prop="goods_price" label="商品价格"  width="80"></el-table-column>
          <el-table-column prop="goods_weight" label="商品重量" width="80"></el-table-column>
          <el-table-column prop="time" label="创建时间" width="220"></el-table-column>
          <el-table-column  prop="address" label="操作">
            <template slot-scope="scope">
                <span @click="bj(scope.row)" class="el-icon-edit bianji">编辑</span>
                <span @click="del(scope.$index)" class="el-icon-delete bianji">删除</span>
            </template>
            
          </el-table-column>
      </el-table>
      <el-pagination
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="sp.total"
            :current-page="1"
            :page-sizes="[8]"
            :page-size="6">
        </el-pagination>
        <el-dialog  title="编辑商品" :visible.sync="dialogFormVisible1">
            <el-form ref="form" :model="bianji">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                        <el-input v-model="bianji.goods_name"></el-input>
                </el-form-item>
                <el-form-item type="number" label="商品价格" :label-width="formLabelWidth">
                        <el-input v-model="bianji.goods_price"></el-input>
                </el-form-item>
                <el-form-item type="number" label="商品数量" :label-width="formLabelWidth">
                        <el-input v-model="bianji.goods_number"></el-input>
                </el-form-item>
                <el-form-item type="number" label="商品重量" :label-width="formLabelWidth">
                        <el-input v-model="bianji.goods_weight"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                 <el-button type="primary" @click="bjcg">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog  title="商品信息" :visible.sync="dialogFormVisible2">
            <table border="1" cellspacing="0">
                <tr>
                    <td style="width: 500px;height: 50px;">商品名称</td>
                    <td>商品价格</td>
                    <td>商品重量</td>
                    <td>商品数量</td>
                </tr>
                <tr>
                    <td style="width: 500px;height: 50px;">{{ sers.goods_name }}</td>
                    <td>{{ sers.goods_price }}</td>
                    <td>{{ sers.goods_weight }}</td>
                    <td>{{ sers.goods_number }}</td>
                </tr>
            </table>
        </el-dialog>
    </div>
</template>
<script>
import {bjsp,shanchu,sphq,sourequest} from '../../../request/api/goods/bjsp'
export default {
    data(){
        return{
            splb:{
                query:'',
                pagenum:1,
                pagesize:8
            },
            bianji:{
                id:'',
                goods_name:'',
                goods_price:'',
                goods_number:'',
                goods_weight:'',
            },
            dialogFormVisible1:false,
            dialogFormVisible2:false,
            formLabelWidth:'120px',
            sp:[],
            id:'',
            sers:[]
        }
    },
    created(){
        this.fb(this.splb)
    },
    methods:{
         // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.splb.pagenum=val
            this.fb(this.splb)
        },
        fb(x){
            sphq(x).then(res=>{
                console.log(res);
                this.sp=res.data.data
                this.sp.goods.map(item=>{
                    let date=new Date(item.add_time*1000)
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                    let time= Y + M + D + h + m + s;
                    item.time=time
                })
                console.log(res.data.data);
            })
        },
        bj(x){
            this.bianji=x
            this.dialogFormVisible1=true
            // 
        },
        bjcg(){
            bjsp(this.bianji).then(res=>{
                console.log(res);
            })
        },
        del(x){
            shanchu(this.sp.goods[x].goods_id).then(res=>{
                if(res.data.meta.status==200){
                    this.fb(this.splb)
                }else{
                    alert('删除失败')
                }
            })
        },
        add(){
            this.$router.push({
                path:'/spgl/tjsp'
            })
        },
        sousuo(){
            // sourequest(this.id).then(res=>{
            //     this.sers=res.data.data
            //     console.log(this.sers);
            //     if(res.data.data){
            //         this.dialogFormVisible2=true  
            //     }else{
            //         alert('搜索不到该商品')
            //     }
            // })
            sphq(this.splb).then(res=>{
                this.sp=res.data.data
                this.sp.goods.map(item=>{
                    let date=new Date(item.add_time*1000)
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                    let time= Y + M + D + h + m + s;
                    item.time=time
                })
                console.log(res.data.data);
            })
            
            
        }
    }
}
</script>

<style scoped>
    .bianji{
      width: 45px;
      text-align: center;
      height: 25px;
      margin-left: 10px;
      line-height: 25px;
      display: inline-block;
      color:white;
      cursor: pointer;
      padding: 3px 10px;
    }
    .el-icon-edit{
      background-color: #1f89f3;
    }
    .el-icon-delete{
      background-color: red;
    }
    .sousuo{
        width: 360px;
        height: 40px;
        border: 1px solid #c0c0c0;
        box-sizing: border-box;
        vertical-align: top;
    }
    .el-icon-search{
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid #c0c0c0;
        height: 40px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #F5F7FA;
        margin-left: -2px;
        font-size: 20px;
        vertical-align: top;
        cursor: pointer;
    }
    .add{
        width: 180px;
        height: 40px;
        display: inline-block;
        border: 1px solid #c0c0c0;
        border-radius: 3px;
        cursor: pointer;
        vertical-align: top;
        margin-left: 30px;
        text-align: center;
        line-height: 40px;
        background-color: #1f89f3;
        color:white;
        margin-bottom: 20px;
    }
</style>